<template>
    <div class="container">
      <van-form  class="items"  input-align="right">
        <div class="item center">
          <h4>访客预约</h4>
        </div>
        <van-field v-model="interviewee" label="被访人姓名" required  class="item" placeholder="请输入姓名"/>
        <van-field v-model="username" label="访客姓名" required  class="item" placeholder="请输入姓名"/>
        <!-- 允许输入正整数，调起纯数字键盘 -->
        <van-field v-model.trim="mobile" required class="item" type="digit" maxlength="11" label="访客手机" placeholder="请输入手机号"/>
        <van-field v-model.trim="company" label="访客单位" class="item"  placeholder="选填"/>
        <div class="item itemTitle">到访时间</div>
        <div class="item">
          <van-field
            readonly
            name="calendar"
            :value="startTime"
            label="开始时间"
            required
            placeholder="请选择"
            @click="showTime('startTime')" right-icon="arrow"
          />
        </div>
        <div class="item">
          <van-field
            readonly
            name="calendar"
            :value="endTime"
            label="结束时间"
            required
            placeholder="请选择"
            @click="showTime('endTime')" right-icon="arrow"
          />
        </div>
        
        <van-field v-if="isEdit" readonly v-model.trim="address" required class="item" label="到访地址" placeholder="请输入场所名字"/>
        <div class="item" v-if="!isEdit">
          <van-field  @click="showSites=true" readonly v-model.trim="address" required class="item" label="到访地址" right-icon="arrow" placeholder="请选择场所"/>
          <van-popup v-model="showSites" position="bottom">
            <van-picker
              title="请选择"
              show-toolbar
              :columns="sites"
              @cancel="showSites=false"
              @confirm="onConfirmSites"
            />
          </van-popup>
        </div>
        <div class="item">
          <van-field readonly required v-model.trim="typeOut" label="来访目的" placeholder="请选择" right-icon="arrow" @click="showTypeOuts=true"/>
           <van-popup v-model="showTypeOuts" position="bottom">
            <van-picker
              title="请选择"
              show-toolbar
              :columns="typeOuts"
              @cancel="showTypeOuts=false"
              @confirm="onConfirmTypeOuts"
            />
          </van-popup>
        </div>
        <div class="item itemTitle blue" @click="isClosed=!isClosed">展开填写更多信息
          <van-icon name="arrow-up" v-show="isClosed" color="#51b1f6"/>
          <van-icon name="arrow-down" v-show="!isClosed" color="#51b1f6"/>
        </div>
        <van-field v-show="isClosed" v-model.trim="personNum" type="digit" class="item" label="同行人数" placeholder="请输入人数"/>
        <div class="item"  v-show="isClosed" @click="addChePai">
          <div class="chepai"> + 添加车牌信息</div>
        </div>
        <div class="moreText"  v-show="isClosed">
          <van-field
            readonly
            label="备注"
            class="title"
          />
          <textarea v-model="remark"
            rows="2"
            autosize
            type="textarea"
            maxlength="255"
            placeholder="请输入备注"
            class="more">
          </textarea>
        </div>
        <!-- 日期类弹窗 -->
        <van-popup v-model="showTimePickerDay" position="bottom">
          <van-datetime-picker
            v-model="currentTime"
            name="validatorDetail"
            type="datetime"
            title="请选择时间"
            @confirm="onConfirmDate"
            @cancel="showTimePickerDay = false"
          />
        </van-popup>
      </van-form>
      <div class="btnBox">
        <van-button class="btn" block type="info" @click="onSubmit">
          确认预约
        </van-button>
      </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
// import axios from 'axios'
import moment from 'moment'
import $ from 'jquery'
export default {
  data() {
    return {
      baseUrl:"http://8.129.2.21:8086",
      // baseUrl:"http://192.168.2.217:8086",//本地后台
      isClosed:false,
      isEdit:false,//编辑还是新增
      id:'1',
      interviewee:'',//被访人姓名
      username:'',//访客姓名
      mobile:'',
      company: '',
      startTime:'',
      endTime:'',
      address:'',//来访地址
      typeOut:'',//来访目的
      personNum:'',//同行人数
      licensePlateNumber:'',//车牌号
      remark:"",
      currentTime:new Date(),
      timeType:'',//来自开始还是结束
      showTimePickerDay:false,
      showTypeOuts:false,
      typeOuts:[
        {
          value:1,
          text:'商务洽谈'
        }
      ],//外出类型
      mid:'',
      showSites:false,
      sites:[],
      addressId:'',
    };
  },
  created () {
    document.title="访客预约"
    console.log('this.$router.params.mid',this.$route.params.mid,this.$route.params.mid==10,this.$route.params.mid===10)
    let nowTime = new Date()
    let nowTime1 = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1)
    this.startTime=moment(nowTime).format('YYYY-MM-DD HH:mm')
    this.endTime=moment(nowTime1).format('YYYY-MM-DD HH:mm')
    if(this.$route.params.mid!=10){
      //编辑
      this.mid=this.$route.params.mid
      this.isEdit=true
      console.log('isEdit')
      this.getVisitor(this.mid)
    }else{
      // 新增
      // this.mid=101000
      this.isEdit=false
      this.getArea()
      console.log('add')
    }
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validatorPhone(val) {
      let reg=/^1(3|4|5|6|7|8|9)\d{9}$/
      return reg.test(val);
    },
    validatorName(val) {
      if(val){
        return true
      }else{
        return false
      }
    },
    onSubmit(){
      let that=this
      if(!that.interviewee){
        this.$toast('被访人姓名不能为空！');
        return
      }else if(!that.username){
        this.$toast('访客姓名不能为空！');
        return
      }else if(!that.mobile){
        this.$toast('访客手机不能为空！');
        return
      }else if(this.validatorPhone(that.phone)){
        this.$toast('请输入正确的访客手机！');
        return
      }else if(!that.startTime){
        this.$toast('请选择开始时间！');
        return
      }else if(!that.endTime){
        this.$toast('请选择结束时间！');
        return
      }else if(!that.address){
        this.$toast('请输入到访地址！');
        return
      }else if(!that.typeOut){
        this.$toast('请选择来访目的！');
        return
      }
      
      if(this.isEdit){
        let data={
          id:that.id,
          areaId: that.addressId,
          areaName:that.address,
          mid:that.mid,
          interviewee:that.interviewee,
          realName:that.username,
          phone:that.mobile,
          visitorCompany:that.interviewee,
          startTime:moment(that.startTime).format('YYYY-MM-DD HH:mm:ss'),
          endTime:moment(that.endTime).format('YYYY-MM-DD HH:mm:ss'),
          address:that.address,
          goal:that.typeOut=='商务洽谈'?1:0,
          personNum:that.personNum,
          licensePlateNumber:that.licensePlateNumber,
          remark:that.remark,
        }
        this.updateVisitor(data)
      }else{
        let data={
          cardType:"居民身份证",
          areaId: that.addressId,
          areaName: that.address,
          interviewee:that.interviewee,
          realName:that.username,
          phone:that.mobile,
          visitorCompany:that.interviewee,
          startTime:moment(that.startTime).format('YYYY-MM-DD HH:mm:ss'),
          endTime:moment(that.endTime).format('YYYY-MM-DD HH:mm:ss'),
          // address:that.address,
          goal:that.typeOut=='商务洽谈'?1:0,
          personNum:that.personNum,
          licensePlateNumber:that.licensePlateNumber,
          remark:that.remark,
        }
        this.addVisitor(data)
      }
    },
    //时间选择
    showTime(type){
      // console.log('type',type)
      this.timeType=type
      let currentTime=type=='startTime'?this.startTime:this.endTime
      this.currentTime=new Date(currentTime)
      console.log('timeType',this.timeType)
      console.log('currentTime',this.currentTime)
      this.showTimePickerDay = true
    },
    onConfirmDate(value){
      console.log('value',value)
      let type=moment(value).format('YYYY-MM-DD HH:mm')
      if(this.timeType=='startTime'){
        this.startTime=type
      }else{
        this.endTime=type
      }
      console.log('type',type,this.startTime,this.endTime)
      this.showTimePickerDay = false
    },
    onConfirmTypeOuts(value){
      this.typeOut = value.text;
      this.showTypeOuts=false
      console.log('value',this.typeOut,value)
    },
    onConfirmSites(value){
      this.address = value.text;
      this.addressId = value.value;
      this.showSites=false
      console.log('value',this.address,value)
    },
    getVisitor(mid){
      let that=this
      $.ajax({
        url:`${that.baseUrl}/visitor/device/getVisitor`,
        type:'get',
        dataType:'json',
        data:{mid:mid},
        success:function (response) {
          console.log('response.data1',response,response.data.realName)
          if(response.code===0){
            that.id=response.data.id
            that.addressId=response.data.areaId
            that.interviewee=response.data.interviewee
            that.username=response.data.realName
            that.mobile=response.data.phone
            that.company=response.data.visitorCompany
            if(response.data.startTime){
              that.startTime=moment(response.data.startTime).format('YYYY-MM-DD HH:mm')
            }
            if(response.data.endTime){
              that.endTime=moment(response.data.endTime).format('YYYY-MM-DD HH:mm')
            }
            that.address=response.data.areaName
            that.typeOut=response.data.goal==1?'商务洽谈':''
            that.personNum=response.data.personNum
            that.licensePlateNumber=response.data.licensePlateNumber
            that.remark=response.data.remark
          }else{
            that.showToast(response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          // that.showToast('接口失败');
        }
      })
    },
    updateVisitor(data){
      let that=this
      $.ajax({
        url:`${that.baseUrl}/visitor/device/updateVisitor`,
        type:'post',
        dataType:'json',
        data:data,
        success:function (response) {
          console.log('response.data1',response,response.data)
          if(response.code===0){
            // that.$toast(response.msg);
            that.$router.push({
              path:'/ud/'+that.mid
            })
          }else{
            that.$toast(response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
        }
      })
    },
    getArea(){
      let that=this
      $.ajax({
        url:`${that.baseUrl}/visitor/area/list`,
        type:'get',
        dataType:'json',
        // data:data,
        success:function (response) {
          console.log('response.data123',response,response.data,response.data.code===0)
          if(response.code===0){
            // that.$toast(response.msg);
            that.sites=[]
            if(response.data){
              response.data.forEach(v=>{
                that.sites.push({
                  value:v.id,
                  text:v.areaName
                })
              })
            }
            // that.sites=response.data
          }else{
            that.$toast(response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
        }
      })
    },
    addVisitor(data){
      let that=this
      $.ajax({
        url:`${that.baseUrl}/visitor/device/addVisitor`,
        type:'post',
        dataType:'json',
        data:data,
        success:function (response) {
          console.log('response.data1244',response,response.data,'/ud/'+response.data)
          if(response.code==0){
            that.$router.push({
              path:'/ud/'+response.data
            })
          }else{
            that.$toast(12+response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
        }
      })
    },
    addChePai(){
      this.$toast('开发中，敬请期待！')
    }
  },
};

</script>
<style lang="scss" scoped>
.container{
  background-color: #f5f5f5;
  padding-bottom: 70px;
  min-height: 100vh;
  box-sizing: border-box;
  .items{
    .item{
      height: 50px;
      background-color: #fff;
      // margin-bottom: 10px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ebedf0;
      h4{
        font-size: 16px;
      }
      &.none{
        height:auto;
        background-color: #f5f5f5;
      }
      &.mb0{
        margin-bottom: 0;
        background-color: #fff;
      }
      &.center{
        justify-content: center;
        // border-bottom: 1px solid #ebedf0;
      }
      &.itemTitle{
        color: #666;
        background-color: #f5f5f5;
        padding-left: 15px;
        
        &.blue{
          display: flex;
          justify-content: center;
          text-align: center;
          color: #51b1f6;
        }
      }
      .chepai{
        margin: 0 15px;
        color: #51b1f6;
      }
    }
    /deep/.van-cell::after{
      border-bottom: none;
    }
    .moreText{
      background-color:#fff;
      margin-bottom: 8px;
      .title{
        height:40px;
      }
      .more{
        width:100%;
        border:none;
        height:100px;
        padding:0 15px;
        box-sizing:border-box;
      }
    }
  }
  .btnBox{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    .btn{
      height: 50px;
      width: 92%;
      margin: 0 auto;
      margin-top: 10px;
      box-sizing: border-box;
    }
  }
}
</style>